<html>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .outer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>
<body>
<div class="outer">
    <button id="begin" style="width: 100px;height: 100px">
        按住开始录音
    </button>
    <textarea style="height: 100px;width: 200px">
    </textarea>
    <audio ></audio>
</div>
</body>
<script>
    let button=document.querySelector("#begin")

    if (navigator.mediaDevices.getUserMedia)
    {
        const constraints = { audio: true };
        navigator.mediaDevices.getUserMedia(constraints).then(
            stream => {
                console.log("授权成功！");
                const mediaRecorder = new MediaRecorder(stream);
                let chunks = [];
                mediaRecorder.ondataavailable = function(e) {//录音开始时被触发
                    chunks.push(e.data);
                };
                mediaRecorder.onstop = e => {//录音结束时被触发
                    let blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
                    // 使用 AJAX 发送 Blob 数据到服务器
                    let formData = new FormData();
                    formData.append("file", blob, "recording.ogg");//file是起的名字
                    var xhr = new XMLHttpRequest();
                    xhr.open("POST", "/upload", true);
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            let textarea=document.querySelector("textarea")
                            textarea.innerText="服务器响应:"+xhr.responseText
                        }
                    };
                    xhr.onloadstart=function () {
                        let textarea=document.querySelector("textarea")
                        textarea.innerText="等待响应"
                    }
                    xhr.onerror = function() {
                        let textarea=document.querySelector("textarea")
                        textarea.innerText="网络错误"
                    };
                    xhr.send(formData);

                    chunks = [];
                    let audioURL = window.URL.createObjectURL(blob);
                    let audio=document.querySelector("audio")
                    audio.src = audioURL;//自动播放
                };
                button.addEventListener("mousedown",(e)=>{
                    button.innerHTML='请说话'
                    let textarea=document.querySelector("textarea")
                    textarea.innerText="正在录音"
                    mediaRecorder.start()//开始录音
                })
                button.addEventListener("mouseup",(e)=>{
                    button.innerHTML='按住开始录音'
                     if (mediaRecorder.state === "recording")
                         mediaRecorder.stop();
                })

            },
            () => {
                alert("授权失败！");
            }
        );
    }
    else {
        console.error("浏览器不支持 getUserMedia");
    }

</script>
</html>